//路由模式
import { createBrowserRouter,createHashRouter } from 'react-router-dom'//history模式和hash模式
const router = createBrowserRouter([
  {
      path:'/',
      element:<Layout></Layout>,
      children:[
          {
              path:'/About',
              element:<About></About>
          },
          {
              index:true,
              element:<Board></Board>
          }
      ]
  },
  {
      path:'/login',
      element:<Login></Login>
  },
  {//params传参
      path:'/artcle/:id/:name',
      element:<Artcle></Artcle>
  },
  {//重定向
      path: '*',
      element:<Notfound></Notfound>
  }
])
//路由传参
const router = createBrowserRouter([
  {
      path:'/login',
      element:<Login></Login>
  },
  {
      path:'/artcle/:id/:name',
      element:<Artcle></Artcle>
  }
])
return (
  <div>我是登录页
  <Link to='/artcLe'>去文章页</Link>
  <button onClick={()=>{navigate('/artcle')}}>去文章页</button>
  <button onClick={()=>{navigate('/artcle?id=10001&name=传参')}}>传参</button>
  <button onClick={()=>{navigate('/artcle/100022/liuguixin')}}>路径传参</button>
  </div>
)
// react-router
import { Link,useNavigate } from "react-router-dom"
const Login = () => {
    const navigate = useNavigate()
    return (
        <div>我是登录页
        <Link to='/artcLe'>去文章页</Link>
        <button onClick={()=>{navigate('/artcle')}}>去文章页</button>
        </div>
    )
}
export default Login

// zi定义Hook的封装
import { useEffect, useState } from 'react'
function useValue() {
  const [value, setValue] = useState(true)
  const handleChange = () => {
    setValue(!value)
  }
  return{
    value,
    handleChange}
}
function App(){
  const {value,handleChange}=useValue()
  return(
    <div>
      {value && <div>this is div</div>}
      <button onClick={handleChange}>click me</button>
    </div>
  )
}
export default App

// 清楚useEffect的副作用

import { useEffect, useState } from 'react'
function A(){
  useEffect(()=> {
  const timer = setInterval(()=>{
    console.log('定时器打印中')
  },1000)
  return() =>  {
    clearInterval(timer)
  }
  })
  return(
    <div>
      this is app
    </div>
  )
}
function App(){
  const [isflag,setisflag] = useState(true)
  const handleClick = () => {
    setisflag(false)
  }
  return(
    <div>
      {isflag && <A/>}
    <button onClick={()=> {handleClick()}}>卸载A组件</button>
    </div>
  )
}
export default App

// useEffect的三种使用

import { useEffect, useState } from 'react'
function App(){
  const [conunt, setCount] = useState(0)
  1.不依赖其他模块
  useEffect(()=> {
    console.log('打印了')
  })
  2.空数组
  useEffect(()=> {
    console.log('打印了')
  },[])
    3.button模块
    useEffect(()=> {
      console.log('打印了')
    },[conunt])
  return(
    <div>
      this is app
      <button onClick={() => setCount(conunt+1)}>{conunt}</button>
    </div>
  )
}
export default App
// useEffect使用
import { useEffect, useState } from 'react'
const URL = ' http://geek.itheima.net/v1_0/channels'
function App(){
  const [list, setList] = useState([])
  useEffect(() => {
    async function getlist() {
      const res = await fetch(URL)
      const list = await res.json()
      console.log(list)
      setList(list.data.channels)
    }
    getlist()
  },[])
  return(
    <div>
      <ul>
        { list.map(item =>  { return <li key={item.id}>{ item.name }</li> }) }nihao
      </ul>
    </div>
  )
}
export default App
// 子传父修改

import { useState } from "react";

function Son(props) {
  console.log(props);
  const messg = 'hello React!'
  return(
    <div>
      this is son,{props.children}
      <button onClick={() => {props.onGet(messg)}}>click me !!!</button>
    </div>
  )
}
function App() {
  const name = 'this is App'
  const [msg, setMsg] = useState('')
  const getMsg = (Msg) => {
    console.log(Msg)
    setMsg(Msg)
  }
  return (
  <div>
    <Son onGet={getMsg}>
    {msg}
    </Son>
  </div>
 )
}
export default App

import { useState } from "react";

// 子传父修改
function Son(props) {
  console.log(props);
  const messg = 'hello React!'
  return(
    <div>
      this is son,{props.children}
      <button onClick={() => {props.onGet(messg)}}>click me !!!</button>
    </div>
  )
}
function App() {
  const name = 'this is App'
  const [msg, setMsg] = useState('')
  const getMsg = (Msg) => {
    console.log(Msg)
    setMsg(Msg)
  }
  return (
  <div>
    <Son onGet={getMsg}>
    {msg}
    </Son>
  </div>
 )
}
export default App
// 父传子 children
function Son(props) {
  console.log(props);
  return(
    <div>
      this is son,{props.children}
    </div>
  )
}
function App() {
  const name = 'this is App'
  return (
  <div>
    <Son>
      <span>this is span</span>
    </Son>
  </div>
 )
}
export default App

// 父传子
function Son(props) {
  console.log(props);
  return(
    <div>
      this is son,{props.name},{props.lis}
    </div>
  )
}
function App() {
  const name = 'this is App'
  return (
  <div>
    <Son name={name}
          age={18}
          lis={['vue','React']}
          obj={{name:'jack'}}
          span={()=> {console.log(123)}}
          jsx={<span>nihao!!</span>}
          ></Son>
  </div>
 )
}
export default App
// 获取DOM
import { useRef } from "react"

function App() {
  const input = useRef(null)
  const handleClick = () => {
    console.dir(input.current)
  }
  return (
  <div>
    <input ref={input}></input>
    <button onClick={handleClick}>click me !</button>
  </div>
 )
}
export default App

// react 双向绑定
import { useState } from "react"

function App() {
  const [value, setValue] = useState('')
  const handleChange = (e) => {
    setValue(e)
  }
 return(
  <div>
    <input value={value}
    onChange={(e) => handleChange(e.target.value)}></input>
  </div>
 )
}
export default App
// 动态更改数据
import { useState } from "react"
function App() {
  const [count ,setCount] = useState({name: 'jake'})
  const handleClick = ()=> {
    setCount({
      ...count,
      name:'jhon'
    })
  }
  return (
    <div>
      <button onClick={handleClick}>{count.name}</button>
    </div>
  )
}
export default App

// 简单数据驱动试图
import { useState } from 'react'
function App(){
  const [count, setCount] = useState(0)
  const handle = () => {
     setCount(count + 1)
  }
return (
  <div>
    <button onClick={handle}>{count}</button>
  </div>
)
}
export default App
// 组件化

function Button () {
  return  <button>click me</button>
}
function App() {
  return (
    <div className='App'>
      <Button></Button>
    </div>
  )
}
export default App

// 传递自定义参数
function App() {
    const clickDate = (name,e) => {
      console.log('被点击了', name,e);
    }
    return(
      <div className='App'>
        <button onClick={(e) => clickDate('jack', e)}>clcik me</button>
      </div>
    )
  }
  export default App

// 绑定事件 e

function App() {
    const clickButton = (e) => {
      console.log('被点击了',e)
    }
    return(
      <div className="App">
        <button onClick={clickButton}>click me</button>
      </div>
    )
  }
  export default App

//    ifelse多层嵌套
// const  artSelect = 2
// function getartSelect () {
//   if(artSelect === 0) {
//     return (
//       <div>我是无图模式</div>
//     )
//   }else if(artSelect === 2) {
//     return (
//       <div>我是单图模式</div>
//     )
//   }else {
//     return (
//       <div>我是三图模式</div>
//     )
//   }
//  }

// const list = [
//     {id: 1, name:'vue'},
//     {id: 2, name:'react'},
//     {id: 3, name:'xxx'}
//   ]
//   function App() {
//     return (
//       <div className="App">
//         <ul>
//        {list.map(item=> <li key={item.id}>{item.name}</li>)}
//        </ul>
//       </div>
//     );
//   }
  
//   export default App;

// const flag = true
// function App() {
//   return (
//     <div className="App" >
//     { flag && <div>this is span</div> }
//     { flag ? <span>hello</span> : <span>noHello</span> }
//     </div>
//   )
// }

// export default App
  